import React, { Component } from 'react';

// css-in-js
// 这是一种在js 中写css 技术,  在vue中同样可以使用, 在react中使用最为广泛
// 该种技术中最常用的一个库, 叫做 styled-components 库;
// 使用步骤:
// 第一步: 安装 styled-components  npm i styled-components
// 第二步: 在js中写css之前, 最好安装一个vscode插件 vscode-styled-components
// 第三步: 定义组件, 然后通过设置该组件上的css 样式, 达到修改子组件样式的目的
// 注意: 当前组件上会有一个6为随机的hash值生成的类名, 有点类似于vue组件设置 style上 scope属性

// css-in-js 语法:
//01: 语法:样式的继承
//02: 语法: 样式的属性传值 

import styled from 'styled-components'
// console.log('styled', styled);
const Test = styled.div`
  // 次数写css样式,以前在css 中怎么写, 现在不变
  font-size:20px ;
  color:red
`
/* console.log('Test', Test) */

// 继承父组件中的样式 继承了 Test组件中的样式
// 注意: 当继承的父组件中的样式和当前组件中的样式同名, 则以当前组件为准
const Test1 = styled(Test)`
   border:2px solid green;
   color:blue
`
// 接收父组件传的属性值, 使用函数的形式的接收
// 模板字符串中使用${变量表达式}
const Test2 = styled.p`
   background:${(props) => props.background};
   font-size:${(props) => props['font-size'] || '16px'}
`

class Father extends Component {
    state = {
        redColor: 'red'
    }
    render() {
        return (
            <div className='father'>
                <Test>
                    <p>测试css-in-js</p>
                </Test>
                <Test1>
                    <p>测试2</p>
                </Test1>
                /* 传递样式属性 */
                <Test2 background={this.state.redColor} font-size='30px'>
                    <span>样式传值</span>
                </Test2>
            </div>
        );
    }
}

export default Father;
